<!DOCTYPE html>
<html lang="en">
<!-- 设置语言为英文 -->

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Gallery - {{ quotation.company.name_en }}</title> <!-- 英文标题 -->
  <!-- 使用国内CDN引入Font Awesome图标库 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

  <style>
    :root {
      --primary-color: #2563eb;
      --secondary-color: #4b5563;
      --light-bg: #f9fafb;
      --border-color: #e5e7eb;
      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
      color: red;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #1f2937;
      background-color: var(--light-bg);
      padding: 0;
    }

    .navbar {
      background-color: white;
      box-shadow: var(--card-shadow);
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      flex-wrap: wrap;
    }

    .logo {
      font-size: 20px;
      font-weight: 600;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-links {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .nav-links a {
      color: var(--secondary-color);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--primary-color);
    }

    .social-icons-top {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-left: 20px;
    }

    .social-icon {
      color: var(--primary-color);
      font-size: 18px;
      transition: transform 0.2s;
    }

    .social-icon:hover {
      transform: translateY(-2px);
    }

    .page-header {
      text-align: center;
      padding: 60px 20px;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    }

    .page-title {
      font-size: 2.5rem;
      margin-bottom: 12px;
      color: #1f2937;
    }

    .page-subtitle {
      font-size: 1.1rem;
      color: var(--secondary-color);
      max-width: 700px;
      margin: 0 auto;
    }

    .gallery-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .filter-controls {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 8px 16px;
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
    }

    .filter-btn:hover,
    .filter-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .masonry-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      grid-gap: 25px;
      align-items: start;
    }

    .product-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: white;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .product-image {
      width: 100%;
      height: 280px;
      object-fit: cover;
      display: block;
    }

    .product-info {
      padding: 16px;
    }

    .product-model {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 6px;
      color: #1f2937;
    }

    .product-desc {
      font-size: 14px;
      color: var(--secondary-color);
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-price {
      font-weight: 700;
      color: var(--primary-color);
      font-size: 18px;
    }

    .product-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
    }

    .action-btn {
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .enquire-btn {
      background: var(--primary-color);
      color: white;
      border: none;
    }

    .enquire-btn:hover {
      background: #1d4ed8;
    }

    .detail-btn {
      background: white;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
    }

    .detail-btn:hover {
      background: #eff6ff;
    }

    .cta-section {
      background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
      color: white;
      padding: 60px 20px;
      text-align: center;
    }

    .cta-title {
      font-size: 2rem;
      margin-bottom: 16px;
    }

    .cta-subtitle {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto 30px;
      opacity: 0.9;
    }

    .fw-bold {
      font-weight: 700;
    }

    .cta-btn {
      display: inline-block;
      padding: 12px 32px;
      background: white;
      color: var(--primary-color);
      border-radius: 6px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.2s;
    }

    .cta-btn:hover {
      transform: translateY(-2px);
    }

    .footer {
      background: #1f2937;
      color: white;
      padding: 40px 20px;
      text-align: center;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: white;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    /* 版权信息样式修改 */
    .copyright-section {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .copyright {
      color: #9ca3af;
      font-size: 14px;
      line-height: 1.8;
    }

    .copyright a {
      color: #d1d5db;
      text-decoration: none;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    .copyright a:hover {
      color: var(--primary-color);
      text-decoration: underline;
    }

    .copyright-notice {
      font-size: 12px;
      color: #6b7280;
      margin-top: 8px;
      letter-spacing: 0.3px;
    }

    @media (max-width: 768px) {
      .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        grid-gap: 15px;
      }

      .product-image {
        height: 240px;
      }

      .page-title {
        font-size: 2rem;
      }

      .navbar {
        flex-direction: column;
        align-items: center;
      }

      .nav-links {
        gap: 12px;
        justify-content: center;
      }

      .social-icons-top {
        justify-content: center;
        margin-top: 10px;
        margin-left: 0;
      }
    }

    @media (max-width: 480px) {
      .masonry-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>

</head>

<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <i class="fas fa-box-open"></i>
      <span>{{ quotation.company.name_en }}</span>
    </div>
    <div class="nav-links">
      <a href="{{ quotation.company.website }}">Home</a>
      <a href="#">Products</a>
      <a href="#">About</a>
      <a href="{{ quotation.user.whatsapp }}">Contact</a>
    </div>
    <div class="social-icons social-icons-top">
      {% for platform in ['facebook','whatsapp', 'instagram', 'twitter','tiktok','pinterest'] %}
      {% set icon_class = 'fab fa-' + ('whatsapp' if platform == 'whatsapp' else
      'facebook-f' if platform == 'facebook' else
      platform) %}
      {% if platform == 'whatsapp' or quotation.user[platform] %}
      <a href="{{ quotation.user[platform] }}" class="social-icon" target="_blank">
        <i class="{{ icon_class }}"></i>
      </a>
      {% endif %}
      {% endfor %}
    </div>
  </nav>


  <!-- 主标题区 -->
  <header class="page-header">
    <h1 class="page-title">Product Gallery</h1> <!-- 我们的产品系列 -->
    <p class="page-subtitle">Contact us directly for more information.</p>
    <!-- 精选优质产品，满足您的各种需求。点击产品了解详情或直接联系我们获取报价。 -->
  </header>

  <!-- 产品图片墙主体 -->
  <main class="gallery-container">

    <!-- 产品网格 -->
    <div class="masonry-grid">
      {% for item in items %}
      <div class="product-card">
        <img src="{{ item.display_image_url }}" alt="{{ item.product_detail.description_en }}" class="product-image" />
        <div class="product-info">
          <h3 class="product-model">{{ item.product_detail.self_model or item.product_detail.other_model }}</h3>
          <p class="product-desc">{{ item.product_detail.description_en or 'No description available' }}</p>
          <p class="product-desc"><span class="fw-bold">Stock: </span>{{ item.product_detail.stock or 'Out of Stock' }}
          </p>
          <div class="product-price">{{ item.quote_currency.symbol }}{{ '%.2f'|format(item.unit_price) }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
  </main>

  <!-- 底部行动号召区域 -->
  <section class="cta-section">
    <h2 class="cta-title">Need Custom Solutions?</h2> <!-- 需要定制方案？ -->
    <p class="cta-subtitle">We offer professional product customization services to meet your specific requirements.
      Contact our sales team for exclusive service.</p>
    <!-- 我们提供专业的产品定制服务，满足您的特殊需求。立即联系我们的销售团队获取专属服务。 -->
    <a href="{{ quotation.user.whatsapp }}" class="cta-btn">Contact Us</a> <!-- 联系我们 -->
  </section>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-links">
      <a href="#">About Us</a> <!-- 关于 -->
      <a href="#">Products</a> <!-- 产品 -->
      <a href="#">Support</a> <!-- 支持 -->
      <a href="#">FAQ</a> <!-- 常见问题 -->
      <a href="#">Privacy</a> <!-- 隐私 -->
    </div>
    <div class="social-icons">
      {% for platform in ['facebook','whatsapp', 'instagram', 'twitter','tiktok','pinterest'] %}
      {% set icon_class = 'fab fa-' + ('whatsapp' if platform == 'whatsapp' else
      'facebook-f' if platform == 'facebook' else
      platform) %}
      {% if platform == 'whatsapp' or quotation.user[platform] %}
      <a href="{{ quotation.user[platform] }}" class="social-icon">
        <i class="{{ icon_class }}"></i>
      </a>
      {% endif %}
      {% endfor %}
    </div>

    <!-- 版权信息区域修改 -->
    <div class="copyright-section">
      <p class="copyright">
        © {{ quotation.created_at.year }} <a href="{{ quotation.company.website }}" target="_blank">{{
          quotation.company.name_en }}</a>
      </p>
      <p class="copyright">All rights reserved. Unauthorized reproduction is prohibited.</p>
      <p class="copyright-notice">Designed and Developed with ❤️ for better user experience</p>
    </div>
  </footer>

  <script>
    // 筛选按钮交互逻辑
    document.querySelectorAll('.filter-btn').forEach((btn) => {
      btn.addEventListener('click', function () {
        document.querySelector('.filter-btn.active').classList.remove('active')
        this.classList.add('active')
        // 这里可以添加实际的筛选逻辑
      })
    })

    // 产品卡片点击事件
    document.querySelectorAll('.product-card').forEach((card) => {
      card.addEventListener('click', function (e) {
        if (!e.target.classList.contains('action-btn')) {
          // 这里可以添加跳转到产品详情页的逻辑
          console.log('View product details')
        }
      })
    })
  </script>
</body>

</html>